<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/themes/default/style.css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
<style>
    #province{
        display: none;
    }
    .taskList{
        padding: 10px 20px;
    }
    .itemHeader{
        padding: 10px 0;
        background-color: #ddd;
        border-radius: 7px;
    }
    .itemHeader h4{
        padding: 0 10px;
        font-weight: 500;
    }
    .jstreeWrap{
        width: 300px;
        height: 400;
        margin: 0 auto;
    }
    input[readonly]{
        cursor: pointer!important;
    }
    h4{
        margin: 0;
    }
    select{
        overflow: auto;
    }
    .loadingImg{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 25px;
        height: 25px;
        margin: auto;
    }
    .alert{
        position: absolute;
        display: none;
        z-index: 10;
        width: 30%;
        top: 10%;
        left: 0;
        right: 0;
        margin: auto
    }
</style>
<body>
    <div class="alert alert-danger alert-dismissible fade in" role="alert">
            <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button> -->
            请求超时
        </div>
        <div id="myModal1" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <!-- <div class="modal-header"> -->
                    <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
                    <!-- <h4 class="modal-title">Modal title</h4> -->
                <!-- </div> -->
                <div class="modal-body">
                    <p style="text-align: center">无可用探针</p>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div> -->
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    <div class="content">
        <div id="map" class="map"></div>
        <div id="province" class="province"></div>
        <div class="selectSwap">
            <div class="mark_modl"></div>
            <p><label><span class="itemTitle">IP地址：</span> <input class="ipName form-control" type="text" placeholder="ip"></label></p>
            <p>
                <label>
                    <span class="itemTitle">任务频率：</span>
                    <select class="form-control" name="refreshRat" id="refresh">
                        <option value="0">手动</option>
                        <option value="1" selected = "selected">5分钟</option>
                        <option value="2">10分钟</option>
                        <option value="3">30分钟</option>
                        <option value="4">60分钟</option>
                    </select>
                </label>
            </p>
            <p>
                <label>
                    <span class="itemTitle">下发类型：</span>
                    <select class="form-control" name="refreshRat" id="delivery">
                        <option value="0">封堵</option>
                        <option value="1">PING</option>
       <!--                 <option value="2">http方式</option>
                        <option value="3">flash方式</option>-->
                        <option value="4">DNS</option>
                        <option value="5">TRACE</option>
                    </select>
                </label>
            </p>
            <p>
                <label>
                    <span class="itemTitle">区 域：</span>
                    <input readonly data-toggle="modal" data-target="#myModal" class="form-control" type="text" id="area" placeholder="区域">
                </label>
            </p>
            <div class="buttonWaper">
                <button class="start">确定</button>
            </div>
            
        </div>
        <div>
            <div class="taskList">
                <div class="itemHeader">
                    <h4>结果列表</h4>
                </div>
                <div class="tableWrap">
                    <div id="dataTables">
                        <table id="task_list" class="display" width="100%"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">区域选择</h4>
            </div>
            <div class="modal-body">
                <div class="content jstreeWrap">
                    <div class="jstree_city">
                        
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary determin" data-dismiss="modal">确定</button>
            </div>
            </div>
        </div>
    </div>    
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/jstree.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap.min.js"></script>
    <script src="../js/common/dimpt.js"></script>
    <script>
        $('.map').css('height', window.innerHeight);
        $('.province').css('height', window.innerHeight);
    </script>
    <script src="js/index.js"></script>
    <script>
        $("#task_list_processing").html('').append('<img class="loadingImg" src="images/loading.gif" alt="">');
    </script>
</body>
</html>